<template>
  <div :class="['todo-item', todoItem.completed ? 'completed' : '']">
    <input
      type="checkbox"
      :checked="todoItem.completed"
      @change="$emit('fulfill', todoItem.id)"
    />
    <label v-if="flag" @dblclick="flag = false">{{ todoItem.content }}</label>
    <span v-else>
      <input
        type="text"
        class="update-frame"
        :value="check"
        @keyup.enter="submitModifiedContents"
        @keyup.esc="flag = true"
        @blur="submitModifiedContents"
        v-focus
      />
    </span>

    <button @click="handleDel"></button>
  </div>
</template>

<script>
export default {
  name: "TodoItem",
  props: {
    todoItem: {
      type: Object,
      require: true,
    },
  },
  data() {
    return {
      // 用来指示label与input的切换
      flag: true,
      check: this.todoItem.content,
    };
  },
  computed: {
    /*   check() {
      return this.todoItem.completed;
    }, */
  },
  methods: {
    // 处理更新项目内容的事件
    submitModifiedContents(e) {
      if (this.flag === false) {
        // 如果输入框的内容为空则删除项目
        if (e.target.value == "") {
          this.handleDel();
          this.flag = true;
          return;
        }
        this.$emit("update", this.todoItem.id, e.target.value);
      }
      this.flag = true;
    },
    handleDel() {
      if (confirm("你确定要删除吗？") == true) {
        this.$emit("del", this.todoItem.id);
      }
    },
  },
  directives: {
    // 自定义指令可以使input自动获得焦点
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus();
      },
    },
  },
};
</script>

<style lang="stylus">
@import '~styles/theme.styl'
@import '~styles/mixins.styl'
.todo-item
  // 弹性布局
  display: flex
  justify-content: space-between
  align-items: center
  padding 10px
  border-bottom: 1px solid rgba(255,255,255,.3)
  // background-color rgba(255,255,255,.1)
  background-color rgba(0,0,0,.3)
  font-size: 24px
  color: $yellow

  input[type='checkbox']
    // 表单元素美化的原则:去掉浏览器自带的样式，使用自定义的样式
    width: 40px
    border: none
    outline: none
    appearance: none//隐藏但不会脱标
    cursor: pointer
    // &表示父元素
    &::after
      content:'✔'
      font-size: 20px
      color: rgba(0,0,0,.5)
      font-family $hp
    &:checked::after
      content:'✔'
      font-size: 20px
      // color: #24bc77
      color: $yellow
      font-family $hp
    // &::after
    //   content: url('~images/delete1.svg')


  label
    flex: 1
    margin-left: 10px
    font-family:$xw
    transition: all 0.3s
    cursor pointer

  // 输入框的样式
  span
    flex: 1
    margin-left: 10px
    .update-frame
      width: 400px;
      height: 50px;
      padding-left: 20px;
      background-color rgba(0,0,0,.5)

      font-size: 24px
      font-family: inherit
      font-weight: 200
      color: $yellow

      outline: none
      border: none
      border-radius: 30px;

  // 删除按钮的样式
  button
    width: 40px
    height: 40px
    clearDefault()
    background-color: transparent
    cursor: pointer
  &:hover
    button::after
      content: '×'
      font-size: 30px
      color: $yellow

/* input[type='text']
  clearDefault() */
&.completed
  label
    text-decoration:line-through
    color: #333
</style>
